<template>
      <!-- marketing/components/share-tabs/share-tabs.wxml -->
    <view>
		<u-popup :show="tabsShow1" @close="close" @open="open" mode="top" :custom-style="{
			'width':'702rpx','margin':'120rpx 24rpx 0','border-radius': '16rpx'
		}">
		<view>11</view>
		<view>11</view>
		<view>11</view>
		<view>11</view>
		<view>11</view>
		<view>11</view>
		
		</u-popup>
        <!-- <u-popup custom-style="background:red" mode='top' :show="tabsShow1"> -->
            <!-- <view class="share-popup flex-row-evenly">
                <block v-for="(item, index) in tabs" :key="index">
                    <button class="share-popup__item" open-type="share" v-if="item == 'share'">
                        <image src="https://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/icon-wx.png" class="share-popup__icon"></image>
                        <view class="share-popup__title">分享至微信</view>
                    </button>

                    <button class="share-popup__item" v-if="item == 'link'">
                        <image src="https://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/icon-link.png" class="share-popup__icon"></image>
                        <view class="share-popup__title">复制链接</view>
                    </button>

                    <button class="share-popup__item" @tap="closeQrCodePopup" v-if="item == 'qrcode'">
                        <image src="https://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/icon-qrcode.png" class="share-popup__icon"></image>
                        <view class="share-popup__title">推广码</view>
                    </button>

                    <button class="share-popup__item" @tap="closePosterPopup" v-if="item == 'poster'">
                        <image src="https://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/icon-hb.png" class="share-popup__icon"></image>
                        <view class="share-popup__title">推广海报</view>
                    </button>
                </block>
            </view> -->
        <!-- </u-popup> -->
		
		
        <u-popup mode="center" custom-style="background:transparent;height:800rpx" :show="showQrCodePopup" @close="closeQrCodePopup">
            <view class="qr-code flex-column-start">
                <image :src="qrcode" class="qr-code__img"></image>
                <view class="qr-code__btn flex-row-center" @tap="saveQrcode">保存到手机</view>
                <image class="qr-code__close" @tap="closeQrCodePopup" src="https://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/delete1.png"></image>
            </view>
        </u-popup>
		
		<!-- <invitation-poster :shareConfig="shareConfig" :showPosterPopup="showPosterPopup" @closePosterPopup="closePosterPopup" /> -->
        
    </view>
</template>

<script lang="ts">
// import zpMixins from '@/uni_modules/zp-mixins/index';
// import vanPopup from './@vant/weapp/popup/index';

// import invitationPoster from '../invitation-poster/invitation-poster';
// marketing/components/share-tabs/share-tabs.ts

var marketing_1 = require("../../api/marketing/marketing");
const { generateQrCode } = marketing_1
const app = getApp();
export default {
    components: {
		// invitationPoster,
        // vanPopup,
        // poster,
        
    },
    data() {
        return {
			tabsShow1:true,
            showQrCodePopup: false,
            showPosterPopup: false,
            canvasImg: '',
            //生成的海报图片链接
            posterConfig: {},
            //海报配置信息
            userInfo: {},
            //用户信息
            qrcode: '' //小程序二维码链接
        };
    },
    /**
     * 组件的属性列表
     */
    props: {
        // 是否显示tabs弹窗
        tabsShow: {
            type: Boolean,
            default: false
        },
        // 是否显示tabs分享类型 微信好友分享、复制链接、二维码、海报
        tabs: {
            type: Array,
            default: () => ['share', 'link', 'qrcode', 'poster']
        },
        //分享tabs的配置信息 路径和参数用于生成二维码和链接
        shareConfig: {
            type: Object,
            default: () => ({
                path: '',

                //页面路径
                //页面参数
                scene: ''
            })
        }
    },
    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
    },
    /**
     * 组件的方法列表
     */
    methods: {
		open() {
		        // console.log('open');
				this.true = false
		      },
		      close() {
		        this.tabsShow1 = false
		        // console.log('close');
		      },
        attached: function () {
            // 在组件实例进入页面节点树时执行
            this.shareTabsInit();
        },

        // 初始化
        shareTabsInit() {
            // 获取用户信息
            this.getUserInfo();

            // 判断是否有海报和推广码的功能
            if (this.tabs.includes('qrcode')) {
                // 让主页面执行后再执行防止拿不到分享配置信息（shareConfig）
                setTimeout(() => {
                    this.generateQrCode();
                });
            }
        },

        // 获取用户信息
        getUserInfo() {
            let userInfo = uni.getStorageSync('userInfo') || {};
            this.setData({
                userInfo
            });
        },

        // 关闭tabs弹窗
        onClose() {
            this.$emit('tabsclose');
        },

        // 关闭二维码弹窗
        closeQrCodePopup() {
            this.setData({
                showQrCodePopup: !this.showQrCodePopup
            });
        },

        // 关闭海报弹窗
        closePosterPopup() {
			this.onClose()
            /* ---处理dataset begin--- */
            // this.handleDataset(e, _dataset);
            /* ---处理dataset end--- */
            // 获取海报逐渐调用初始化
            // this.selectComponent('#poster').posterInit(() => {
                this.setData({
                    showPosterPopup: !this.showPosterPopup
                });
				console.log(this.showPosterPopup,'这是什么')
            // });
        },

        // 设置权限
        openSetting(fn: any) {
            uni.showModal({
                title: '提示',
                content: '请打开添加到相册',
                showCancel: true,
                cancelText: '取消',
                confirmText: '确定',
                success: (res) => {
                    if (res.confirm) {
                        uni.openSetting({
                            success(res: any) {
                                console.log(res);
                                if (res.authSetting['scope.writePhotosAlbum']) {
                                    if (fn) {
                                        fn();
                                    }
                                } else {
                                    uni.showToast({
                                        title: '需要保存到相册的权限',
                                        icon: 'none',
                                        duration: 2000
                                    });
                                }
                            }
                        });
                    } else if (res.cancel) {
                        uni.showToast({
                            title: '需要保存到相册的权限',
                            icon: 'none',
                            duration: 2000
                        });
                    }
                }
            });
        },

        // 获取保存到相册
        getWritePhotosAlbumSetting(fn: any) {
            let that = this;
            uni.getSetting({
                // 获取权限信息
                success: (response) => {
                    if (!response.authSetting['scope.writePhotosAlbum']) {
                        uni.authorize({
                            scope: 'scope.writePhotosAlbum',
                            success() {
                                if (fn) {
                                    fn();
                                }
                            },
                            fail() {
                                if (uni.openSetting) {
                                    that.openSetting(fn);
                                }
                                return;
                            }
                        });
                    } else {
                        if (fn) {
                            fn();
                        }
                    }
                }
            });
        },

        // 保存小程序二维码
        saveQrcode() {
            let { qrcode } = this;
            //   qrcode = 'https://gbtrnd.com.cn/img/logo.a0b067dd.png'
            // qrcode = 'http://119.91.124.105:8090/group1/default/20220824/18/45/0/1562390704250945536.png'
            // qrcode = 'http://47.108.138.66:7110/group1/image/17590234693459267860.jpg?download=0'

            console.log(qrcode, 'qrcode');
            const that = this;
            if (qrcode) {
                that.getWritePhotosAlbumSetting(() => {
                    uni.downloadFile({
                        url: qrcode,
                        success: function (res: any) {
                            let filePath = res.tempFilePath;
                            console.log(res);
                            console.log(filePath, 'filePath');
                            uni.saveImageToPhotosAlbum({
                                filePath,
                                success(res: any) {
                                    console.log('res', res);
                                    uni.showToast({
                                        title: '已保存到相册',
                                        icon: 'success',
                                        duration: 3000
                                    });
                                },
                                fail: function (err: any) {
                                    uni.showToast({
                                        title: err.errMsg,
                                        icon: 'none',
                                        duration: 3000
                                    });
                                }
                            });
                        }
                    });
                });
            }
        },

        // 获取小程序二维码
        async generateQrCode() {
            let { path, scene } = this.shareConfig;
            console.log(path, scene);
            if (!path) {
                return;
            }
            let page = path.slice(1);
            //   page='pages/sharePage/sharePage'
            //   scene='ST=10001&HD=1564859251392774144'
			let envVersion = app.getEnvVersion()
            // 开发工具设置成为体验版
            if(envVersion == 'develop'){
                envVersion='trial'
            }
            try {
                let res = await generateQrCode({
                    page,
                    scene,
                    envVersion,
                    checkPath: envVersion == 'release'
                });
                if (res.code == 200) {
                    let qrcode = res.data;
                    this.setData({
                        qrcode
                    });
                }
            } catch (error) {}
        },

        // 处理二维码图片路径
        disposeQrCode(path: string, type: string): string {
            if (~path.indexOf('.bin')) {
                return path.replace('.bin', '.' + type);
            }
            return path;
        }
    },
    created: function () {}
}
</script>
<style lang="less">
@import '../../commin/flex.less';
.share-popup {
    background: #fff;
    height: 221rpx;
    margin: 24rpx;
    border-radius: 16rpx;
    padding: 0 32rpx;

    &__item {
        &::after {
            border: none;
        }

        background: transparent;
        margin: 0;
        padding: 0;
        line-height: 1;
    }

    &__icon {
        width: 106rpx;
        height: 106rpx;
        margin-bottom: 12rpx;
    }

    &__title {
        font-size: 24rpx;
        color: #606266;
    }
}

.share-poster {
    &__inner {
        padding: 73rpx 0 40rpx 0;
        width: 703rpx;
        position: relative;

        .inner__close {
            width: 44rpx;
            height: 44rpx;
            position: absolute;
            right: 0;
        }

        .inner_bg {
            width: 703rpx;
            height: 1123rpx;
            background: #fff;
            margin-top: 70rpx;
            border-radius: 16rpx;
            margin-bottom: 64rpx;
        }

        .inner_btn {
            width: 680rpx;
            height: 88rpx;
            background: #000000;
            border-radius: 44rpx;
            font-weight: bold;
            color: #ffffff;
        }
    }
}

.qr-code {
    width: 702rpx;
    height: 730rpx;
    border-radius: 16rpx;
    background: #fff;
    position: relative;
    padding-top: 80rpx;
    box-sizing: border-box;

    &__close {
        position: absolute;
        width: 42rpx;
        height: 42rpx;
        bottom: -60rpx;
        left: 50%;
        transform: translateX(-50%);
    }

    &__img {
        width: 443rpx;
        height: 443rpx;
        margin-bottom: 80rpx;
    }

    &__btn {
        width: 270rpx;
        height: 88rpx;
        background: linear-gradient(105deg, #2b99ff, #1b8cf5);
        box-shadow: 0px 3rpx 6rpx 0rpx rgba(0, 110, 212, 0.3);
        border-radius: 44rpx;
        font-size: 30rpx;
        font-weight: bold;
        color: #ffffff;
    }
}
</style>
